<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .clock {
        position: relative;
        top: 20px;
        left: 20px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        box-shadow: 0 0 0 10px #666;
      }

      .clock .background > div {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 5px;
        height: 95%;
        background: #ccc;
      }

      .clock .background > div:nth-child(1) {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      .clock .background > div:nth-child(2) {
        transform: translate(-50%, -50%) rotate(30deg);
      }

      .clock .background > div:nth-child(3) {
        transform: translate(-50%, -50%) rotate(60deg);
      }

      .clock .background > div:nth-child(4) {
        transform: translate(-50%, -50%) rotate(90deg);
      }

      .clock .background > div:nth-child(5) {
        transform: translate(-50%, -50%) rotate(120deg);
      }

      .clock .background > div:nth-child(6) {
        transform: translate(-50%, -50%) rotate(150deg);
      }

      .clock .background::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0%;
        top: 0%;
        background: #fff;
        border-radius: 50%;
        transform: scale(0.8);
      }

      .clock > .point {
        width: 20px;
        height: 20px;
        background: #666;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
      }

      .clock .hour {
        width: 9px;
        position: absolute;
        height: 25%;
        background: #666;
        left: 50%;
        bottom: 50%;
        transform-origin: 50% bottom;
        transform: translate(-50%, 0) rotate(0);
        border-radius: 10px;
      }

      .clock .minute {
        width: 6px;
        position: absolute;
        height: 35%;
        background: #666;
        left: 50%;
        bottom: 50%;
        transform-origin: 50% bottom;
        transform: translate(-50%, 0) rotate(180deg);
        border-radius: 10px;
      }

      .clock .second {
        width: 2px;
        position: absolute;
        height: 35%;
        background: #ff0000;
        left: 50%;
        bottom: 50%;
        transform-origin: 50% bottom;
        transform: translate(-50%, 0) rotate(0);
        border-radius: 3px;
      }

      .clock .time {
        font-family: monospace;
        font-size: 42px;
        text-align: center;
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
      }
    </style>
  </head>

  <body>
    <div class="clock">
      <div class="line">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="point"></div>
      <div class="hour"></div>
      <div class="minute"></div>
      <div class="second"></div>
      <div class="time">12:20:15</div>
    </div>
  </body>
</html>
